<template>
	<basic-layout v-loading="loading">
		<template v-slot:content-main>
			<div class="home-page">
				<!-- 中间二级标题 -->
				<!-- <div class="type-nav-container">
					<div v-for="item in navDatas" :key="item.value"
						:class="['type-nav-item', { active: item.value === filterType }]"
						@click="handleCheckoutWorkFilterType(item.value)">
						{{ item.name }}
					</div>
				</div> -->
				<!-- 中间下方小内容 -->
				<div class="work-container">
					<div class="work-groups"
						v-for="item in groupList"
						:key="item.dictValue">
						<div class="work-group-title">
							{{ item.dictLabel }}
						</div>
						<div class="work-list">
							<animate-card
								v-for="(work, index) in item.projects"
								:key="work.projectId"
								:index="index"
								:name="work.name"
								:image="work.coverUrl"
								:slug="work.projectId"
								@click="handleClickCard(work.projectId)"
							/>
						</div>
					</div>
				</div>
			</div>
		</template>
		<template v-slot:content-side>
			<div ref="workDetail" class="work-detail-container" v-loading="detailLoading">
				<img src="../../assets/images/watermark.png" class="water-img" alt="">
				<div class="work-detail">
					<div class="zh-section">
						<div class="work-item">
							<strong>项目名称：</strong>
							<span>{{ workInfo.name }}</span>
						</div>
						<!-- <div class="work-item">
							<strong>项目编号：</strong>
							<span>{{ workInfo.number }}</span>
						</div> -->
						<div class="work-item">
							<strong>户型：</strong>
							<span>{{ workInfo.areaFlag }}</span>
						</div>
						<div class="work-item">
							<strong>面积：</strong>
							<span>{{ workInfo.area }} sqm.</span>
						</div>
						<div class="work-item">
							<strong>常住人口：</strong>
							<span>{{ workInfo.familyFlag }}</span>
						</div>
						<div class="work-item">
							<strong>风格：</strong>
							<span>{{ workInfo.styleFlag }}</span>
						</div>
						<div class="work-item">
							<strong>原始状态：</strong>
							<span>{{ workInfo.typeFlag }}</span>
						</div>
						<!-- <div class="work-item">
							<strong>状态：</strong>
							{{ PROGRESS[work.progress_id] ? PROGRESS[work.progress_id].zh : "" }}
						</div> -->
						<div class="work-item">
							<strong>设计时间：</strong>
							<span>{{ formatDate(workInfo.startTime) }}</span>
						</div>
						<div class="work-item">
							<strong>当前进度：</strong>
							<span>{{ workInfo.buildStatus }}</span>
						</div>
						<div class="work-item">
							<strong>竣工时间：</strong>
							<span>{{ workInfo.endTime ? formatDate(workInfo.endTime) : '' }}</span>
						</div>
<!--						<div class="work-item" v-if="workInfo.cityFlag">-->
<!--							<strong>城市：</strong>-->
<!--							<span>{{ workInfo.cityFlag }}</span>-->
<!--						</div>-->
						<!-- <div class="work-item">
							<strong>主创团队：</strong>
							<span>{{ workInfo.teamFlag }}</span>
						</div> -->
					</div>
					<div class="en-section">
						<div class="work-item">
							<strong>Project Name：</strong>
							<span>{{ workInfo.nameEn }}</span>
						</div>
						<!-- <div class="work-item">
							<strong>Project Number：</strong>
							<span>{{ workInfo.number }}</span>
						</div> -->
						<div class="work-item">
							<strong>House Type：</strong>
							<span>{{ workInfo.areaFlagEn }}</span>
						</div>
						<div class="work-item">
							<strong>Area：</strong>
							<span>{{ workInfo.area }} sqm.</span>
						</div>
						<div class="work-item">
							<strong>Family Size：</strong>
							<span>{{ workInfo.familyFlagEn }}</span>
						</div>
						<div class="work-item">
							<strong>Style：</strong>
							<span>{{ workInfo.styleFlagEn }}</span>
						</div>
						<div class="work-item">
							<strong>Original State：</strong>
							<span>{{ workInfo.typeFlagEn }}</span>
						</div>
						<div class="work-item">
							<strong>Design Time：</strong>
							<span>{{ formatDate(workInfo.startTime) }}</span>
						</div>
						<div class="work-item">
							<strong>Progress：</strong>
							<span>{{ workInfo.buildStatusEn }}</span>
						</div>
						<div class="work-item">
							<strong>Finish Time：</strong>
							<span>{{ workInfo.endTime ? formatDate(workInfo.endTime) : '' }}</span>
						</div>
<!--						<div class="work-item">-->
<!--							<strong>City：</strong>-->
<!--							<span>{{ workInfo.cityFlagEn }}</span>-->
<!--						</div>-->
						<!-- <div class="work-item">
							<strong>Main Creative Team：</strong>
							<span>{{ workInfo.teamFlagEn }}</span>
						</div> -->
					</div>
				</div>
				<div class="work-content" v-html="workInfo.content"></div>
			</div>
		</template>
	</basic-layout>
</template>

<script>
import BasicLayoutBody from "@/components/layout/BasicLayoutBody";
import AnimateCard from "@/components/AnimateCard";
import dayjs from "dayjs";
import { getProjectDetail, getListGroup } from '@/api';
import { mapGetters } from "vuex";

export default {
	components: {
		"basic-layout": BasicLayoutBody,
		"animate-card": AnimateCard
	},
	data() {
		return {
			loading: true,
			detailLoading: false,
			filterType: '1',
			slug: null,
			workCat: {},
			navDatas: [
				{
					name: '毛坯',
					value: '1',
					children: []
				},
				{
					name: '老房重建',
					value: '2',
					children: []
				},
				{
					name: '精装改造',
					value: '3',
					children: []
				}
			],
			groupType: {
				areaFlag: 'areaGroup',
				familyFlag: 'familyGroup',
				styleFlag: 'styleGroup',
				typeFlag: 'typeGroup',
				yearFlag: 'yearGroup',
				cityFlag: 'cityGroup'
			},
			workInfo: {
				projectId: '',
				name: '',
				nameEn: '',
				number: '',
				coverUrl: '',
				keywords: '',
				description: '', // 简介
				area: '',
				startTime: '',
				endTime: '',
				sort: '',
				areaFlag: '',
				familyFlag: '',
				styleFlag: '',
				typeFlag: '',
				cityFlag: '',
				teamFlag: '',
				buildStatus: '',
				areaFlagEn: '',
				styleFlagEn: '',
				typeFlagEn: '',
				familyFlagEn: '',
				cityFlagEn: '',
				teamFlagEn: '',
				buildStatusEn: '',
				// 内容详情
				content: ``
			},
			works: [],
			formats: [],
			locations: [],
			groupList: []
		};
	},
	computed: {
		...mapGetters(['areaGroup', 'familyGroup', 'styleGroup', 'typeGroup', 'cityGroup'])
	},
	watch: {
		$route: {
			handler(newVal, oldVal) {
				if(newVal.query.detail_id && newVal.query.detail_id != oldVal.query.detail_id) {
					console.log('aaa');
					this.getGroup();
					this.getWorkDetail();
				}
			},
			deep: true
		}
	},
	activated() {},
	deactivated() {
		console.log('ddd');
		this.groupList = [];
	},
	created() {
		if(!this.groupList || !this.groupList.length) {
			console.log('ccc');
			this.getGroup();
			this.getWorkDetail();
		}
	},
	methods: {
		formatDate(date) {
			return dayjs(date).format("YYYYMM");
		},
		getGroup() {
			let list = this[this.groupType[this.$route.query.cat_id]];
			if(list && list.length) {
				this.groupList = [...list];
			} else {
				getListGroup({flagType: this.$route.query.cat_id}).then((res) => {
					if(res.code == 200) {
						this.groupList = [...res.data];
					} else {
						this.$message.error(res.msg)
					}
				}).catch((err) => {

				});
			}
		},
		getWorkDetail() {
			this.slug = this.$route.query.detail_id;
			this.detailLoading = true;
			getProjectDetail(this.$route.query.detail_id).then((res) => {
				this.detailLoading = false;
				this.workInfo = {...res.data};
			}).catch((err) => {
				this.detailLoading = false;
			});
		},
		handleCheckoutWorkFilterType(value) {
			this.filterType = value;
		},
		handleClickCard(slug) {
			this.handleCheckoutWork(slug);
		},
		handleCheckoutWork(slug) {
			if (slug != this.slug) {
				this.$router.push({
					path: "/works/detail",
					// params: {
					// 	slug
					// },
					query: {...this.$route.query, detail_id: slug}
				});
			}
		}
	}
  };
</script>

<style lang="scss" scoped>
.home-page {
	padding-left: 19px;
	.type-nav-item {
		display: inline-block;
		line-height: 22px;
		font-size: 16px;
		font-weight: 600;
		color: #717171;
		margin-right: 57px;
		cursor: url(../../assets/icon/circle.svg) 15 15, auto;
		&.active {
			position: relative;
			color: #000;
		}
		&.active::before {
			position: absolute;
			content: "";
			left: -2px;
			width: 16px;
			height: 16px;
			display: inline-block;
			border-radius: 50%;
			background: #7ff226;
			mix-blend-mode: multiply;
		}
	}
	.work-container {
		margin-top: 5px;
		.work-groups {
			margin-bottom: 18px;
			.work-group-title {
				color: #131313;
				margin-bottom: 4px;
				font-size: 14px;
				font-weight: 600;
			}
			.work-list {
				font-size: 0;
			}
		}
	}
}
.work-detail-container{
	position: relative;
}
.water-img{
	position: fixed;
	width: 150px;
	top: 15px;
	right: 15px;
	z-index: 999;
}
.work-detail {
	margin-bottom: 10px;
	padding-top: 15px;
	display: flex;
	// justify-content: space-between;

	.section {
		width: 50%;
	}
	.en-section{
		margin-left: 16%;
	}
	.work-item {
		font-size: 12px;
		color: #322825;
		line-height: 1.5;
		strong {
			font-weight: 800;
		}
		span{
			font-weight: 800;
		}
	}
}

/* v-html 插入 不会作为template模板编译 */
// 1.去掉scope
// 2. >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值
// 3. /deep/ ::v-deep

// .work-content{
// 	img {
// 		width: 100%;
// 	}
// }
.work-content {
	padding-top: 10px;
}
.work-content ::v-deep img {
	width: 100%;
}
.work-content ::v-deep .ql-align-center{
	margin: 30px 0;
}
</style>